﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Mashable stil Ajax Menü | MeftunMede.Blogspot.com</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Goudy+Bookletter+1911&subset=latin,latin-ext' rel='stylesheet' type='text/css'/>
<style type="text/css">
a{text-decoration:none;color:#1BC3F8;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;-ms-transition:.5s;transition:.5s;padding:2px 4px;}
a:hover{background:#2882b7;color:#fff;}
:focus{outline:none;}
html{background:#e8e8e8 url(http://3.bp.blogspot.com/-V2tGyRV9wIY/UjqTVGOrmXI/AAAAAAAABdQ/XYS2v7U8DUI/s1600/highlight-bg.png);-webkit-box-shadow:0 0 100px rgba(0,0,0,0.15) inset;-moz-box-shadow:0 0 100px rgba(0,0,0,0.15) inset;box-shadow:0 0 100px rgba(0,0,0,0.15) inset;min-height:100%;}
body{font:normal 13px/1.6 "Goudy Bookletter 1911",serif,"Helvetica Neue", Helvetica, Arial, sans-serif;width:960px;margin:25px auto;}
h1{text-shadow:0 1px 0 #fff;font-family:oswald, serif;text-transform:capitalize;font-size:45px;text-align:center;font-weight:400;color:gray;margin:20px 0 10px;}
h1 span{font-weight:700;}
table{display:block;width:70%;margin:0 auto;}
table td{text-align:center;padding:20px;}
p.description{font-family:'Goudy Bookletter 1911', serif;text-align:center;color:#949494;font-size:14px;text-shadow:0 1px rgba(255,255,255,0.5);}
.credits{font-size:14px;text-align:right;color:#aaa;margin-top:350px;}
.mef a{text-decoration:none;font-family:Oswald,Arial,Helvetica,sans-serif;color:#1BC3F8;-webkit-transition:.5s;-moz-transition:.5s;-o-transition:.5s;-ms-transition:.5s;transition:.5s;padding:2px 4px;}
.mef a:hover{background:#2882b7;font-family:Oswald,Arial,Helvetica,sans-serif;color:#fff;}
ul.mefmenu{list-style:none;line-height:1;overflow:visible!important;}
ul.mefmenu:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0;}
ul.mefmenu li{list-style:none;position:relative;float:left;margin:0!important;padding:0!important;}
ul.mefmenu li a{font-family:Oswald, Arial, Helvetica, sans-serif!important;color:#6b6b6b!important;text-shadow:0 1px 0 #fff;text-decoration:none;font-weight:700;text-transform:capitalize!important;font-size:12px!important;display:block!important;border:none 0!important;margin:0;padding:12px 16px!important;}
ul.mefmenu li a:hover,ul.mefmenu li a.hoverover{background:#f5f5f5!important;}
ul.mefmenu ul{position:absolute;display:none;top:100%;border:#ccc solid 1px;}
ul.mefmenu ul li{float:none;min-width:160px;background:#f5f5f5;text-shadow:none;}
ul.mefmenu ul li a{text-transform:none;font-weight:700;padding:12px 14px;}
ul.mefmenu ul li a:hover,ul.mefajaxmenu ul li a.hoverover{background:#fff!important;}
ul.mefmenu ul ul{display:none;left:100%;top:0;}
#mefajaxmenu{width:900px;box-shadow:0 3px 10px rgba(0,0,0,0.1);margin:60px auto;}
ul.mefajaxmenu li div.submenu{display:none;position:absolute;width:600px;z-index:90;left:-1px;top:100%;overflow:hidden;min-height:150px;background:#fff;border:#ccc solid 1px;border-top:0 none;}
ul.mefajaxmenu ul,ul.mefajaxmenu ul li{display:block!important;border:none 0!important;margin:0!important;padding:0!important;}
ul.mefajaxmenu ul li{background:none!important;float:none!important;}
ul.mefajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#f5f5f5;}
ul.mefajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;background:none;margin:8px 0!important;}
ul.mefajaxmenu ul.postslist li{display:block;overflow:hidden;border-bottom:1px solid #eee;position:relative;min-height:60px;padding:8px 8px 8px 110px !important;}
ul.mefajaxmenu ul.postslist li:last-child{border-bottom:0 none;}
ul.mefajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:8px;width:100px;height:60px;overflow:hidden;border:#dcdcdc solid 1px;font-size:0;line-height:0;}
ul.mefajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0;}
ul.mefajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;font-weight: 400;}
ul.mefajaxmenu .loader{background:url(https://lh5.googleusercontent.com/-4qjg1CclZ64/UK6TG-7resI/AAAAAAAAJ6w/z6dE6nRTNKI/s128/loading_icon_1.gif) 0 0 no-repeat scroll transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px;}
ul.mefajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #999;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0;}
ul.mefajaxmenu li:hover div.submenu{display:block;}
*,.mefmenu *{margin:0;padding:0;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.addAjaxHtml();this.ajaxcall=null;this.lielem=this.elem.find(".verticlemenu li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.lielem.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.numPosts};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loader"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loader").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s100-c/"):n.settings.defaultImg;r.push('<li><span class="imgCont"><img alt="',i,'" src="',o,'"/></span><a rel="nofollow" title="',i,'" href="',s,'">',i,"</a></li>")}):r.push("<h5>","&#220;zg&#252;n&#252;m!!, G&#246;sterilecek Konu Yok","</h5>");this.container.html(r.join(""));this.lielem.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Hata!! Blog Yaz&#305;lar&#305; al&#305;namad&#305;!</h5>")}},addArrow:function(){this.lielem.closest("li").find("span").remove();this.lielem.removeClass("hoverover");this.li.addClass("hoverover");e("<span></span>",{"class":"menuArrow"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hoverover");var r=e(this).find("ul.verticlemenu li").height()*e(this).find("ul.verticlemenu li").length;t.find("ul.postslist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hoverover")})},addAjaxHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("mefajaxmenu").find(">li").find("ul:first").addClass("verticlemenu").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.verticlemenu").after(e("<ul></ul>",{"class":"postslist"}))},requestFirstAjax:function(e){e=e.find(".verticlemenu li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.ajaxBloggerMenu=function(n){var r={numPosts:4,divClass:"submenu",postsClass:"postslist",defaultImg:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);</script>
<body>
<h1>Blogger İçin <span>Mashable</span> stil Ajax Menü</h1>
<p class="description">Mashable'dan esinlenerek bir AJAX Blogger Navigasyon Menüsü. By <a href="https://plus.google.com/+MeftunMEDE" target="_blank">Meftun MEDE</a> <span class="amp">&amp;</span> <a href="http://meftunmede.blogspot.com" target="_blank">MeftunMede.Blogspot.com</a></p>

<ul id="mefajaxmenu" class="mefmenu">
<li>
<a href="http://meftunmede.blogspot.com">ANA SAYFA</a>
</li>
<li>
<a href="#">ÖRNEK 1</a>
<ul>
<li><a href="http://meftunmede.blogspot.com/search/label/Sosyal%20Medya">SOSYAL MEDYA</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">BLOGGER EKLENTİLERİ</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri">YEMEK TARİFLERİ</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Filmler">FİLMLER</a></li>
</ul>
</li>
<li>
<a href="#">ÖRNEK 2</a>
<ul>
<li><a href="http://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1">HTML KODLARI</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Programlar">PROGRAMLAR</a></li>
<li><a href="http://meftunmede.blogspot.de/search/label/%C4%B0nternet">İNTERNET</a></li>
<li><a href="http://meftunmede.blogspot.de/search/label/Ara%C3%A7lar">BLOGGER ARAÇLARI</a></li>
</ul>
</li>
<li><a href="http://meftunmede.blogspot.com">BLOGGER</a></li>
<li><a href="http://www.MeftunApart.com">NORMAL LİNK</a></li>
</ul>
<div class="credits">
<div class="separator" style="clear: both; text-align: center;">
<img src="http://1.bp.blogspot.com/-rVsNPNHIX8E/UAgNcPyWbtI/AAAAAAAAAHo/-LczSB2OxCE/s400/Angel_Mef.png" border="0" height="87" width="225"><br>
<div class="mef a">
<center><p>&#169; 2013 <a href='http://MeftunMede.Blogspot.com'>MeftunMede.Blogspot.com </a></p></center>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mefajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Mesaj Sayısı
defaultImg : 'http://2.bp.blogspot.com/-yRSXWDTHZlA/T6s8tkMqNnI/AAAAAAAAA7w/SEgoiBELIF4/s1600/no-photo-available.jpeg' // Varsayılan küçük resim
});});
</script>
</body>
</html>